<template>
  <div id="list"> 

     <div class="demo" :style="{  height: dtheight + 'px' }">
    
     <el-form ref="form"  label-width="80px">  
        <el-row> 
            <el-col :span="18" style="display:flex;">
                <el-form-item label="" label-width="0px">
                        <el-select   v-model="search_form.select_num" placeholder="请选择状态" style="width:160px;">
                            <el-option  v-for="(item,index) in search_form.select_data" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="" style="margin-left:5px;" label-width="0px">
                    <el-select  v-model="search_form.select_td_num" placeholder="请选择团队" style="width:150px;">
                        <el-option  v-for="(item,index) in search_form.select_td_data" :key="index" :label="item.telphone" :value="item.uid" ></el-option>
                    </el-select>
                </el-form-item>


              <div class="custom_button2"  style="margin-left:10px;"></div>
            </el-col>

            <el-col :span="6" style="text-align: right;">  
                <el-button type="primary" class="custom_color_button" style="margin-bottom:10px;" >刷新</el-button>            
            </el-col>
        </el-row> 
      </el-form>

      <div style="display:flex;">
          <div style="flex:1;">
                <div class="con">
                    <div class="top">
                        <div class="top_item" style="flex: 1;">
                            <img class="top_img" src="@/assets/images/echarts_tb3.png" />
                              权限情况
                        </div>
                    </div>
                    <div class="box">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                    </div>
                </div>
          </div>
          <div style="margin-left:30px;width:300px;">
              <div class="con">
                    <div class="top">
                        <div class="top_item" style="flex: 1;">
                            <img class="top_img" src="@/assets/images/echarts_tb9.png" />
                              积分情况
                        </div>
                    </div>
                    <div class="box" style="padding:15px 60px;">
                          <div class="box_item">
                            <div class="item_c">
                                <div class="item_c_1">蜜贝持有</div>
                                <div class="item_c_2">5000000</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">金蜜持有</div>
                                <div class="item_c_2">5000000</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">金蜜券持有</div>
                                <div class="item_c_2">5000000</div>
                            </div>
                          </div>
                    </div>
              </div>
          </div>
          <div style="flex:1;margin-left:30px;">
              <div class="con">
                    <div class="top">
                        <div class="top_item" style="flex: 1;">
                            <img class="top_img" src="@/assets/images/echarts_tb10.png" />
                              活动统计
                        </div>
                    </div>
                    <div class="box" style="display:flex;padding:15px 60px;">
                        <div class="box_item" style="flex:1;border-right: 2px solid #E5E5E5;">
                            <div class="item_c">
                                <div class="item_c_1">金蛋总数</div>
                                <div class="item_c_2">5000000</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">金蛋已兑换</div>
                                <div class="item_c_2">5000000</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">金蛋未兑换</div>
                                <div class="item_c_2">5000000</div>
                            </div>
                          </div>
                          <div class="box_item" style="flex:1;margin-left:60px;">
                            <div class="item_c">
                                <div class="item_c_1">彩蛋总数</div>
                                <div class="item_c_2">5000000</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">彩蛋已兑换</div>
                                <div class="item_c_2">5000000</div>
                            </div>
                             <div class="item_c">
                                <div class="item_c_1">彩蛋未兑换</div>
                                <div class="item_c_2">5000000</div>
                            </div>
                          </div>
                    </div>
              </div>
          </div>
      </div>

      <div class="top" style="margin-top:20px;">
          <div class="top_item" style="flex: 1;">
              <img class="top_img" src="@/assets/images/echarts_tb11.png" />
                蜂巢情况
          </div> 
      </div>
      

      <div class="title_box">
             <div class="title_box_yuan bg_color1"></div>
              当前持有
      </div>
      <div style="display:flex;">
              <div class="con_box">
                   <div class="con_box_item1 bg_color1">
                          <div class="con_box_item_top">持有总数</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                    </div>
              </div>
              <div class="con_box">
                   <div class="con_box_item1 bg_color1">
                          <div class="con_box_item_top">对应价值</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                    </div>
              </div>
      </div>

         
         <div style="display:flex;">
              <div class="con_box">
                   <div class="con_box_item1 bg_color1">
                          <div class="con_box_item_top">预警一</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                    </div>
              </div>
              <div class="con_box">
                   <div class="con_box_item1 bg_color1">
                          <div class="con_box_item_top">预警二</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                    </div>
              </div>
      </div>

      <div class="title_box">
             <div class="title_box_yuan bg_color2"></div>
              待产出
       </div>
       <div style="display:flex;">
              <div class="con_box">
                   <div class="con_box_item1 bg_color2">
                          <div class="con_box_item_top">持有总数</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                    </div>
              </div>
              <div class="con_box">
                   <div class="con_box_item1 bg_color2">
                          <div class="con_box_item_top">对应价值</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                    </div>
              </div>
      </div>
          
          <div class="title_box">
             <div class="title_box_yuan bg_color3"></div>
              产出订单
          </div>
          <div style="display:flex;">
              <div class="con_box">
                   <div class="con_box_item1 bg_color3">
                          <div class="con_box_item_top">持有总数</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                    </div>
              </div>
              <div class="con_box">
                   <div class="con_box_item1 bg_color3">
                          <div class="con_box_item_top">对应价值</div>
                   </div>
                   <div class="con_box_item2">
                       <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                            <div class="item_b" >
                                <div class="item_b_1">
                                  <img class="item_b_1_img"  src="@/assets/images/zy1.png" />
                                   优选日用品
                                </div>
                                <div class="item_b_2">5000000</div>
                            </div>
                    </div>
              </div>
      </div>

   </div>



   </div>
</template>

<script>
import modular2 from '@/view/Operationdata/Analysis/modular2'
export default {
   name: 'list',
  data () {
    return {
        dtheight:'500',  //窗口高度
        search_form:{
            select_num:'',
            select_data:[{"id":3,"name":"运营中心"},{"id":1,"name":"0号线"},{"id":2,"name":"2号线"}],
            select_td_num:'',
            select_td_data:[]
        },
    }
  },
   components:{
     modular2
  },
  created(){
     this.dtheight = window.innerHeight - 200
     this.td_list()
  },
  mounted (){
    
  },
  methods: {
      td_list(){
        this.post("/Statistics/listOfLeader", {
        
	        }).then(res => {
            this.search_form.select_td_data = res.result       
            //console.log(this.select_td_data)
         })
     },
  }
}
</script>


<style scoped>
.demo{
    overflow-y:auto;
}

.top{
    display: flex;
}
.top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.box{
    padding: 15px;
    border-radius: 10px; 
    box-shadow: 0px 4px 9px 0px rgba(116, 77, 254, 0.1);
    margin-top: 20px;
    height: 250px;
}
.item_a{
  /* display:flex; */
  padding:0px 15px;

}

.item_b{
  /* flex: 1; */
  float: left;
  width: calc(100%/2);
  margin-top:30px;
}
.item_b_1{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item_b_1_img{
  width:20px;
  height: 20px;
  margin-right:5px;
}
.item_b_2{
  margin-top: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}


.box_item{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}
.item_c{
  display: flex;
  flex-direction: column;
}
.item_c_1{
  font-size: 18px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
}

.item_c_2{
  margin-top: 10px;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}

.con_box{
  display: flex;
  flex-direction: column;
  flex: 1;
}
.con_box:first-child{
  border-right: 2px dashed #F7F7FD;
}
.con_box_item1{
  height: 35px;
  line-height: 35px;
  padding-left: 50px;
  color:white;
}
.bg_color1{
  background-color: #5E62FF;
}
.bg_color2{
  background-color: #FF6B40;
}
.bg_color3{
  background-color: #40ACFF;
}
.con_box_item2{
    padding: 15px;
    height: 200px;
    background-color: #F7F7FD;
}
.con_box_item2>.item_b{
  margin-top: 15px;
}
.title_box{
  display: flex;
   font-size: 16px;
  color: #333333;
    align-items: center;
    margin:15px 0px;
}
.title_box_yuan{
  width: 8px;
  height: 8px;
  border-radius:50%;
  margin-right:10px;
}
</style>